import {MoneyCollectOutlined} from '@ant-design/icons'
import {
    Button,
    Checkbox,
    Col,
    Flex,
    Form,
    Input,
    message,
    Radio,
    Row,
    Select,
    Typography
} from 'antd'
import React, {useState} from 'react'
import {useEffect} from 'react'
import {useNavigate, useParams} from 'react-router-dom'
import MyDatePicker from '../components/MyDatePicker'
import {
    adminCouponAdd,
    adminCouponEdit,
    adminCouponInfo
} from '../service/activaty'
import moment from 'moment'

export default function MarketAddCoupon() {
    const navigate = useNavigate()
    const {id} = useParams() // 获取路由参数中的id
    const isEditing = id !== undefined // 根据id是否存在判断是编辑还是添加
    const [form] = Form.useForm()
    // 新建活动还是编辑活动
    const [title, setTitle] = useState(isEditing ? '编辑优惠券' : '新建优惠券')
    // 保存选择的日期
    const [selectedDateString, setSelectedDateString] = useState(null)
    // 有效期
    const [expiration, setExpiration] = useState('1')
    const [isMenkan, setIsMenkan] = useState('0')
    //订单金额
    const [orderNum, setOrderNum] = useState(0)
    // 选择的是否互斥
    const [huchi, setHuchi] = useState('0')
    // 互斥多选框
    const huchiOptions = [
        {
            label: '满减券',
            value: '0'
        },
        {
            label: '满折券',
            value: '1'
        },
        {
            label: '随机券',
            value: '2'
        }
    ]
    // 设置初始化日期
    const [initialDate, setInitialDate] = useState([
        moment(new Date()),
        moment(new Date())
    ])
    useEffect(() => {
        if (isEditing) {
            ;(async () => {
                const res = await adminCouponInfo(id)
                console.log(res)
                form.setFieldsValue(res.data)
                // 设置日期
                // setInitialDate([
                //   moment(res.data.startDate.substring(0, 10)),
                //   moment(res.data.endDate.substring(0, 10))
                // ])
            })()
        } else {
        }
    }, [])
    return (
        <>
            <Row className="info">
                <Col span={24}>
                    <Flex justify={'space-between'}>
                        <Typography.Title level={3}>{title}</Typography.Title>
                    </Flex>
                </Col>
            </Row>
            <Row className="container">
                <Col span={24}>
                    <Typography.Title level={4}>内容信息</Typography.Title>
                </Col>
                <Col span={24}>
                    <Form
                        labelCol={{
                            span: 2
                        }}
                        wrapperCol={{
                            span: 12
                        }}
                        style={{width: '100%', marginTop: 30}}
                        form={form}
                        onFinish={async (values) => {
                            console.log(values)
                            // 如果是指定时间段
                            values.startDate = selectedDateString[0] + ' 0:0:0'
                            values.endDate = selectedDateString[1] + ' 23:59:59'
                            if (isEditing) {
                                const res = await adminCouponEdit({...values, id})
                                console.log(res)
                                if (res.code === '0') {
                                    message.success('编辑成功')
                                    navigate('/admin/market/coupon')
                                } else {
                                    message.error('编辑失败')
                                }
                            } else {
                                const res = await adminCouponAdd(values)
                                console.log(res)

                                if (res.code === '0') {
                                    message.success('添加成功')
                                    navigate('/admin/market/coupon')
                                } else {
                                    message.error('添加失败')
                                }
                            }
                        }}
                    >
                        <Form.Item
                            label="优惠券类型"
                            name={'couponType'}
                            rules={[{required: true, message: '请选择优惠券类型'}]}
                        >
                            <Select
                                options={[
                                    {value: 0, label: '现金券'},
                                    {value: 1, label: '满减券'},
                                    {value: 2, label: '满折券'},
                                    {value: 3, label: '随机券'},
                                    {value: 4, label: '折扣券'}
                                ]}
                                style={{width: 300}}
                            />
                        </Form.Item>
                        <Form.Item
                            label="优惠券名称"
                            name="couponName"
                            rules={[{required: true, message: '请输入优惠券名称'}]}
                        >
                            <Input
                                maxLength={10}
                                showCount
                                placeholder="最多10个字"
                                style={{width: 300}}
                            />
                        </Form.Item>
                        <Form.Item
                            label="优惠券描述 "
                            name="describes"
                            rules={[{required: true, message: '请输入优惠券描述'}]}
                        >
                            <Input.TextArea
                                maxLength={10}
                                showCount
                                placeholder="最多10个字"
                                style={{width: 300}}
                            />
                        </Form.Item>
                        <Form.Item
                            label="发行总量"
                            name="maxUsageLimit"
                            rules={[{required: true, message: '请输入发行总量'}]}
                        >
                            <Input
                                maxLength={10}
                                showCount
                                placeholder="不能超过100万张"
                                style={{width: 300}}
                            />
                        </Form.Item>
                        <Form.Item
                            label="适用范围"
                            name="applicable"
                            initialValue={'全场通用'}
                        >
                            <Radio.Group buttonStyle="solid">
                                <Radio.Button value="全场通用" checked>
                                    全场通用
                                </Radio.Button>
                                <Radio.Button value="1" disabled>
                                    指定类型
                                </Radio.Button>
                                <Radio.Button value="2" disabled>
                                    指定商品
                                </Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item
                            label="优惠券面额"
                            name="discountValue"
                            rules={[{required: true, message: '请输入优惠券面额'}]}
                        >
                            <Input
                                type="number"
                                value="0"
                                addonAfter={'￥'}
                                style={{width: 300}}
                            />
                        </Form.Item>
                        <Form.Item label="有效期">
                            <Radio.Group
                                defaultValue={'1'}
                                buttonStyle="solid"
                                style={{marginRight: 10}}
                                onChange={(e) => {
                                    console.log(e.target.value)
                                    setExpiration(e.target.value)
                                }}
                            >
                                <Radio.Button value="1">指定时间段</Radio.Button>
                                <Radio.Button value="2" disabled>
                                    从领取日期起多少天内有效
                                </Radio.Button>
                            </Radio.Group>
                            {expiration === '1' && (
                                <MyDatePicker
                                    selectedDateString={selectedDateString}
                                    setSelectedDateString={setSelectedDateString}
                                    initialDate={initialDate}
                                />
                            )}
                            {expiration === '2' && (
                                <Input type="number" style={{width: 300}}/>
                            )}
                        </Form.Item>
                        <Form.Item
                            label="每人限领"
                            name="usageLimit"
                            rules={[{required: true, message: '请输入每人限领'}]}
                        >
                            <Input
                                type="number"
                                addonAfter={'张'}
                                style={{width: 300}}
                                placeholder="默认每人限领一张"
                            />
                        </Form.Item>
                        <Form.Item
                            label="互斥规则"
                            name="exclusionType"
                            initialValue={huchi}
                        >
                            <Radio.Group
                                onChange={(e) => {
                                    console.log(e.target.value)
                                    setHuchi(e.target.value)
                                }}
                            >
                                <Radio value="0">不互斥</Radio>
                                <Radio value="1">与指定类型互斥</Radio>
                            </Radio.Group>
                        </Form.Item>
                        {huchi === '1' && (
                            <Row style={{marginBottom: 20}}>
                                <Col span={8} offset={2}>
                                    <Checkbox.Group options={huchiOptions}/>
                                </Col>
                            </Row>
                        )}

                        <Form.Item label="消费门槛">
                            <Radio.Group
                                onChange={(e) => {
                                    setIsMenkan(e.target.value)
                                }}
                                value={isMenkan}
                                defaultValue={'0'}
                            >
                                <Radio value="0">无门槛</Radio>
                                <Radio value="1">订单满</Radio>
                            </Radio.Group>
                            {isMenkan === '1' && (
                                <Input
                                    defaultValue="0"
                                    addonAfter="￥"
                                    style={{width: 100}}
                                />
                            )}
                        </Form.Item>

                        <Form.Item
                            label="叠加规则"
                            name="usageNum"
                            rules={[{required: true, message: '请输入叠加规则'}]}
                        >
                            <Input
                                type="number"
                                addonAfter={'张'}
                                style={{width: 300}}
                                placeholder="默认每人最多使用一张"
                            />
                        </Form.Item>
                        <Form.Item
                            label="最大抵扣面额"
                            name="maxDiscountAmount"
                            rules={[{required: true, message: '请输入最大抵扣面额'}]}
                        >
                            <Input
                                type="number"
                                addonAfter={'元'}
                                style={{width: 300}}
                                placeholder="最大抵扣面额"
                            />
                        </Form.Item>
                        <Form.Item label=" " colon={false}>
                            <Button type="primary" htmlType="submit">
                                发布
                            </Button>
                            <Button
                                type="default"
                                htmlType="reset"
                                style={{marginLeft: 10}}
                            >
                                重置
                            </Button>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
        </>
    )
}
